<template class="graph">
    <div :id="order" style="width: 390px; height: 400px"/>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "graph",
    data() {
        return {
            time_x: [],  //x轴数据，对应的time
            ch1: [],
            ch2: [],
            ch3: [],
            index: 0,   //原数据实时渲染到哪了
            timer: 'timer',
            legend: ['CH1', 'CH2', 'CH3']  //图线标识文字：必须和series中的数据名一致
        }
    },

    //生命周期函数
    mounted() {
        //初始化
        for (var i = 0; i < 50; i++) {
            this.ch1.push(this.randomData().ch1)  //apiData是直接渲染上图形的数据，初始化从randomData()里拿1000个数据
            this.ch2.push(this.randomData().ch2)
            this.ch3.push(this.randomData().ch3)
            this.time_x.push(this.randomData().time)
            this.index = (this.index + 1) % this.sensorData.length;
        }
        //开启定时器
        this.timer = setInterval(this.handlerData, 1000)
        /*
        * 1.隔1s渲染新的数据上去并抛弃旧的数据的技巧：
        *       每隔1s出队一定数量的旧数据，入队一定数量的新数据
        *       然后重新画图
        * 2.数据结构必须符合echarts对应的图形
        * */

    },
    beforeDestroy() {
        if (this.timer !== 'timer') {  // 这个处理是为了在组件销毁前删除定时器（以免越开越多）
            clearInterval(this.timer)
            this.timer = 'timer'
        }
    },

    // 方法区
    methods: {
        // 方法域中的其他方法
        handlerData() {
            for (var i = 0; i < 2; i++) {  //每次出队5个数据，又进队5个数据
                this.ch1.shift()
                this.ch2.shift()
                this.ch3.shift()
                this.time_x.shift()
                this.ch1.push(this.randomData().ch1)  //apiData是直接渲染上图形的数据，初始化从randomData()里拿1000个数据
                this.ch2.push(this.randomData().ch2)
                this.ch3.push(this.randomData().ch3)
                this.time_x.push(this.randomData().time)
                this.index = (this.index + 1) % this.sensorData.length;
            }

            this.drawLine()  //重新画图
        },

        randomData() {
            let ch1 = this.sensorData[this.index][1]
            let ch2 = this.sensorData[this.index][2]
            let ch3 = this.sensorData[this.index][3]
            let time = this.timestampToTime(this.sensorData[this.index][0])
            return {
                ch1,
                ch2,
                ch3,
                time,  //string
            }
        },

        //工具函数：时间戳转时间
        timestampToTime(timestamp) {
            var date = new Date(timestamp / 1000000);  //ns时间戳/100000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
            var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
            var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
            var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
            var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
            return Y+M+D+'\n'+h+m+s;
        },

        // 该方法必须放在方法域中的最后一个
        drawLine() {
            // 指定图表的配置项和数据
            var option = {
                //网格配置 grid可以控制线性图 柱状图 图表大小
                grid: {
                    left: '1%',
                    containLabel: true
                },
                //设置图标标题
                title: { text: `传感器数据${this.order}` },
                //图标提示框组件
                tooltip: {
                    position: function(pos, params, dom, rect, size) {
                        // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                        var obj = { top: 60 }
                        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
                        return obj
                    }
                },
                //设置x轴配置
                xAxis: {
                    data: this.time_x
                },
                yAxis: {},
                // 对图例组件的相关配置
                legend: {
                    data: this.legend
                },
                // 绑定数据展示
                series: [{
                    name: 'CH1',
                    type: 'line',
                    data: this.ch1
                }, {
                    name: 'CH2',
                    type: 'line',
                    data: this.ch2
                },{
                    name: 'CH3',
                    type: 'line',
                    data: this.ch3
                }]
            }

            // 基于准备好的dom，初始化echarts实例
            var instanceByDom = this.$echarts.getInstanceByDom(window.document.getElementById(this.order))
            var myChart = instanceByDom === undefined ? this.$echarts.init(window.document.getElementById(this.order)) : instanceByDom
            myChart.clear();
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            // resetSize
            window.onload = function () {
                myChart.resize();
            };
            window.onresize = function () {
                myChart.resize();
            };
        }
    },
    props: {
        "sensorData": {
            required: true,
        },
        "order": {
            type: Number,
            required: true
        }
    }
}
</script>

<style scoped>

</style>
